<template>
  <div class="login">
    <div class="col-left"></div>
    <div class="login-box">
      <div class="title">后台管理系统</div>
      <div class="form-box">

        <el-form :model="userInfo" status-icon ref="userInfo" :rules="rules">

          <el-form-item prop="email">
            <el-input type="text" v-model="userInfo.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input type="password" v-model="userInfo.password" show-password autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>

          <Slider></Slider>

        

          <el-form-item class="form-group">
             <el-button class="login-btn" type="primary" @click="submitForm('userInfo')">登录</el-button>
          </el-form-item>

          <!-- <div class="clearfix login-text">
            <span class="fr">忘记密码?</span>
          </div> -->

        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/less/b_login.less'
import Slider from '@/components/Slider.vue'
  export default {
    name: 'B_Login',
    components: {
      Slider
    },
    data(){
      return{
        userInfo: {
          email: 'admin@163.com',
          password: 'admin123',
        },

        //验证表单规则
        rules: {

          email: [
             { validator: this.validEmail, trigger: 'blur' }
          ],

          password: [
            { validator: this.validPassword, trigger: 'blur' }
          ],

        },

      }
    },

    methods:{

      // goPage(n){
      //   this.$router.push({name:n})
      // },

      //验证邮箱
      validEmail(rule, value, callback) {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        setTimeout(() => {
          let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
          if (!reg.test(value)) {
            callback(new Error('邮箱格式不正确'));
          } else {
            callback();
          }
        }, 400);
      },

      //验证密码(首字符为字母, 字母数字_组合, 6-16位)
      validPassword(rule, value, callback) {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
        setTimeout(() => {
          let reg = /^[A-Za-z]\w{5,15}$/;
          if (!reg.test(value)) {
            callback(new Error('密码必须以字母开头，可包含字母数字_'));
          } else {
            callback();
          }
        }, 400);
      },


      submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false;
          }

          if(!this.$store.state.isSuccess){
            this.$message.warning('请进行滑块验证! ')
            return;
          }

          //发起登录请求
          console.log('发起登录请求');
          this.axios({
            method: 'POST',
            url: this.baseUrl + '/b_login',
            data: {
              email: this.userInfo.email,
              password: this.userInfo.password
            }
          }).then(res => {
            console.log('res ==> ', res);
            if(res.data.code == 1030){
              this.$message({
                message: `${res.data.msg}！即将前往首页。`,
                type: 'success'
              });
              // 将token保存在cookie中
              // for (let key in res.data.data) {
              //   this.$cookies.set(key, res.data.data[key], '1d');
              // }
              this.$cookies.set('__tk', res.data.data.token, '1d');
              this.$cookies.set('__ai', res.data.data.aid, '1d');
              this.$cookies.set('__ac', res.data.data.position, '1d');
              // 跳转后台首页
              setTimeout(() => {
                this.$router.push({name: 'B_Main'})
              }, 1000);
            }else{
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          }).catch(err => {
            console.log('err ==> ', err);
            
          })


        });
      },
    }
  }
</script>

